<template>
  <div class="works">
    <div  class="works-top">
        <el-input v-model="searchForm.name" placeholder="搜索作品" class="seek-inp"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>       
        <el-button  @click="getDataList" type="primary">查询</el-button>
        <el-checkbox label="已认证" v-model="checkValue" @click="toPage" class="approve"></el-checkbox>
        <el-checkbox label="已上链"   @click="toAudit(0)" class="cochain"></el-checkbox>
        <el-button type="primary" @click="toPage">添加作品</el-button>
    </div>
    <div class="art">
      <div class="art-layout" v-for="item in workData" :key="item.id">
        <img :src="item.cover" alt="" class="art-nft">
        <span>{{ item.name }}</span>
        <div class="layout-info">
          <div class="art-cochain" v-if="item.ntfStatus==3">已上链</div>
          <div class="art-cochain" v-else>未上链</div>

          <div class="art-approve" v-if="item.authStatus==3" >已认证</div>
          <div class="art-approve" v-else>未认证</div>

        </div>
      </div>
    </div>
   <div class="mineEpaging">
      <el-pagination
        class="pagings"
        background
        v-if='pageTotal > 0'
        :page-sizes="paginations.pageSizes"
        :page-size="paginations.pageSize"
        :layout="paginations.layout"
        :total="pageTotal"
        :current-page='paginations.page'
        @current-change='handleCurrentChange'
        @size-change='handleSizeChange'
        >
      </el-pagination>
   </div>
  </div>
</template>

<script>
import { getWorkList } from '@/api/work'
export default {
  data(){
    return{
      checkValue: '',
      searchForm: {
        name: '',
        nftStatus: '',
        authStatus: ''
      },
      input:'',
      workData: [],
      pageTotal:0,
      paginations: {
        page: 1,  // 当前位于哪页
        pageSize: 5,   // 1页显示多少条
        pageSizes: [5, 10, 15, 20],  //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
      },
  }
},
mounted(){
    this.getDataList();
  },
  methods:{
    toAudit(e){
      if(e ===1 ){
        this.searchForm.authStatus = 3;
      }else {
        this.searchForm.nftStatus = 3;
      }
      this.getDataList()
    },

    toPage(){
      this.$router.push("/addWork");
    },
    getDataList(){
      getWorkList({
        pageSize: this.paginations.pageSize,
        page: this.paginations.page,
        ...this.searchForm
      }).then((res)=>{
        this.workData = res.data.workList.rows;
        this.pageTotal = res.data.workList.count;
      })
    },
    handleCurrentChange(page){
      this.paginations.page = page;
      this.getDataList()
    },
      // 每页多少条切换 pageSize
    handleSizeChange(page_size){
      this.paginations.pageSize = page_size;
      console.log('static',page_size);
      this.getDataList()
    }
 }
}
</script>

<style scoped lang="less">
.works{
  .works-top{
    display: flex;
    .seek-inp{
      margin-left: 50px;
      width: 600px;
    }
    .approve,.cochain{
      line-height: 40px;
      margin-left: 40px;
    }
    .cochain{
      margin: 0 100px 0 20px;
    }
  }
  .art{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 100px;
    padding: 20px;
    // width: 80%;
    // height: 80%;
    .art-layout{
      margin: 0px 65px 25px 0;
      width: 180px;
      height: 250px;
      border: 3px solid #D7D7D7;
      img{
        margin:  5px 0 0 5px;
        width: 170px;
        height: 180px;
        border-radius: 10px;
      }
      span{
        margin-left: 10px;
        font-weight: 600;
      }
      .layout-info{
        margin: 10px 0 0 10px;
        display: flex;
        justify-content: space-between;
        width: 70%;
        .art-cochain{
          background-color: #D7D7D7;
        }
        .art-approve{
          background-color: #D7D7D7;
        }
      }
    }
  }
}
.mineEpaging{
  margin: -40px 0 0px 660px;
}
</style>